<template>
  <div>
    <div class="attr-item-edit-wrapper dataPage">
      <p class="attr-item-title">设置来源</p>
      <div class="flexG-1 attr-item-edit-input">
        <el-select v-model="fromData" size="mini">
          <el-option label="静态数据" value="1">静态数据</el-option>
          <el-option label="API" value="2">API</el-option>
        </el-select>
      </div>
    </div>
    <globalDataTemplate
      v-if="fromData === '1'"
      :xAxisData="xAxisData"
      :seriesData="seriesData"
      listType="1"
    />
    <div v-if="fromData === '2'">
      <div class="attr-item-edit-wrapper dataPage">
        <p class="attr-item-title">请求方式</p>
        <div class="flexG-1 attr-item-edit-input">
          <el-select v-model="type" size="mini">
            <el-option label="POST" value="POST">POST</el-option>
            <el-option label="GET" value="GET">GET</el-option>
          </el-select>
        </div>
      </div>
      <div class="table-wraper">
        <p>数据响应结果应为列表，包含如下参数</p>
        <table>
          <thead>
            <tr>
              <td>字段</td>
              <td>类型</td>
              <td>说明</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import globalDataTemplate from "../../globalDataTemplate";
export default {
  name: "base-bar-chart-data",
  components: {
    globalDataTemplate
  },
  props: {
    value: Object
  },
  data() {
    return {
      fromData: "2",
      type: "POST",
      tableData: []
    };
  },
  computed: {
    ...mapState({
      projectData: state => state.editor.projectData,
      activePageUUID: state => state.editor.activePageUUID,
      activeElementUUID: state => state.editor.activeElementUUID,
      activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      "currentPageIndex",
      "activeElementIndex",
      "activeElement",
      "activePage"
    ]),
    xAxisData() {
      return this.activeElement.propsValue.baseBarChartForm.xAxis.data;
    },
    seriesData() {
      return this.activeElement.propsValue.baseBarChartForm.series;
    }
    // nameListData(){
    //   return this.activeElement.propsValue.barOptions.series;
    // }
  },

  watch: {
    lineSimpleStyleData: {
      deep: true, //深度监听设置为 true
      handler: function(newV, oldV) {}
    }
  },

  methods: {
    addItem(value) {
      console.log(value);
    },
    removeItem(value) {
      console.log(value);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss">
.table-wraper{
  width: 100%;
  table{
    width: 100%;
    text-align: center;
    margin: 10px 0;
    border: 1px solid #eaeaea;
    thead{
      tr{
border-bottom: 1px solid #eaeaea;
      }
      
    }
  }
}
.dataPage {
  .el-select {
    width: 100%;
  }
}
</style>
<style lang="scss">
.attr-item-edit-wrapper {
  // padding-left: 18px;
  display: flex;
  width: 100%;
  // text-align: center;
  padding-bottom: 10px;
  .attr-item-title {
    text-align: left;
    min-width: 60px;
    font-size: 12px;
  }
  .attr-item-edit-input {
    &.flexG-1 {
      flex-grow: 1;
      margin-left: 10px;
    }
    .attr-item-edit-input-des {
      text-align: center;
      line-height: 1;
      margin-top: 2px;
      font-size: 12px;
      color: $gray;
    }
  }
}
</style>